<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="utf-8"/>
    <!-- <link href="favicon.ico" rel="shortcut icon">-->
    <link rel="shortcut icon" href="#"/>
    <title></title>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/axios.min.js"></script>
</head>

<body>
<div id="app">
    {{msg}} -- {{name}}
    <div>
        <h3>手机信息</h3>
        标题：<input placeholder="请输入账号" type="text" ref="title"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        卖点：<input placeholder="请输入账号" type="text" ref="sellPoint"/>&nbsp;&nbsp;&nbsp;&nbsp;
        价格 <：<input placeholder="请输入账号" type="text" ref="price"/>&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="findItem()">查询手机</button>
        <table th:border="1px" th:cellspacing="0" style="font-family:arial; color:red; font-size:8px;">
            <tr>
                <th width="5%"> 商品id</th>
                <th width="30%">商品标题</th>
                <th width="40%">商品卖点</th>
                <th width="5%">商品价格</th>
                <th width="5%">所属类目</th>
                <th width="5%">商品状态</th>
                <th width="10%">更新时间</th>
            </tr>
<!--            "title": "华为 P6 (P6-C00) 白 电信3G手机 双卡双待双通",-->
<!--            "sellPoint": "经典旗舰，万人好评！强悍四核，前置500万美颜自拍,，2GB RAM+16GB ROM大内存！",-->
<!--            "price": "129900",-->
<!--            "num": 99999,-->
<!--            "barcode": null,-->
<!--            "image": "http://image.egou.com/jd/a898d6b93e124a6bb26d58254a112250.jpg",-->
<!--            "cid": "560",-->
<!--            "status": 1,-->
<!--            "created": "2015-03-08 21:27:37",-->
<!--            "updated": "2015-03-08 21:27:37"-->
            <tr v-for="(item, index) in tbItem" :key="index">
                <td align="center">{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>{{item.sellPoint}}</td>
                <td align="center">{{item.price}}</td>
                <td align="center">{{item.cid}}</td>
                <td align="center">{{item.status}}</td>
                <td align="center">{{item.updated}}</td>
            </tr>
        </table>

    </div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            name: "张三",
            tbItem: [
            ]
        },

        methods: {
            findItem(){
                let param = {
                    "title": this.$refs.title.value,
                    "sellPoint": this.$refs.sellPoint.value,
                    "price": this.$refs.price.value
                };
                axios.post("http://localhost:8081/item/list", param)
                    .then((res) =>{
                      this.tbItem =  this.tbItem.concat(res.data.data);
                })
            },
            // findUser() {
            //     axios.get("http://localhost:8081/user/list?username=" + this.$refs.username.value)
            //         .then((res) => {
            //         console.log(res.data.data);
            //     this.userList = this.userList.concat(res.data.data);
            // })
            // }
        },
    });


</script>
</body>
</html>
